<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>添加</title>
    <style type="text/css">
        body, html, #baimap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <link rel="stylesheet" type="text/css" href="${path}/gui/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/gui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${path}/gui/themes/jasper.css">
    <link rel="stylesheet" type="text/css" href="${path}/gui/themes/color.css">
    <link rel="shortcut icon" href="${path}/gui/themes/icons/logo_mini.ico" type="image/x-icon"/>
    <script type="text/javascript" src="${path}/gui/js/jquery-2.2.3.js"></script>
    <script type="text/javascript" src="${path}/gui/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${path}/gui/local/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=935f7b99747f3845a0ec9eb5847b8720"></script>
</head>
<body>
<form id="ff_trace_point_add" class="easyui-form" action="${path}/trace/tracePointAdd" method="post"
      data-options="novalidate:true">
    <table cellpadding="5">
        <tr>
            <td>名称:</td>
            <td><input size="25" maxlength="25" type="text" name="pname" id="pname"/></td>
            <td>范围(米):</td>
            <td><input type="text" name="scope" size="25" maxlength="5" id="scope"/></td>
        </tr>
        <tr>
            <td>地址:</td>
            <td>
                <input type="text" size="64" maxlength="64" id="addressId" name="address"/>
                <div id="searchResultPanel"
                     style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            </td>
            <td>
                <a href="javascript:void(0)" class="easyui-linkbutton c2"
                   onclick="toPoint()">定位</a>
                <input type="text" style="display:none" id="lat" name="lat"/>
                <input type="text" style="display:none" id="lgt" name="lgt"/>
            </td>
            <td></td>
        </tr>
    </table>
</form>
<div style="text-align:right;padding:23px;padding-bottom: 15px;">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" style="width:40px"
       onclick="submitForm()">提交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton c8" style="width:40px"
       onclick="clearForm()">清空</a>
</div>
<div id="baimap"></div>
</body>
<script>
    function G(id) {
        return document.getElementById(id);
    }
    //左上角，添加默认缩放平移控件
    var top_left_navigation = new BMap.NavigationControl();
    var map = new BMap.Map("baimap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(121.48789949, 31.24916171), 16);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(top_left_navigation);
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input": "addressId"
                , "location": map
            });
    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            var marker = new BMap.Marker(pp);
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            $("#lat").val(pp.lat);
            $("#lgt").val(pp.lng);
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    function submitForm() {
        $('#ff_trace_point_add').form('submit', {
            onSubmit: function () {
                var pname = $("#pname").val();
                var scope = $("#scope").val();
                var addressId = $("#addressId").val();
                var flag = false;
                if (null != pname && pname != "") {
                    if (null != scope && scope != "") {
                        if (null != addressId && addressId != "") {
                            flag = true;
                        } else {
                            $.messager.alert('提示', '地址不能为空', 'error');
                        }
                    } else {
                        $.messager.alert('提示', '范围不能为空', 'error');
                    }
                } else {
                    $.messager.alert('提示', '名称不能为空', 'error');
                }
                return flag;
            },
            success: function (data) {
                var obj_json = $.parseJSON(data);
                if (obj_json.mta == 1) {
                    $.messager.alert('提示', obj_json.msg, 'info');
                    $('#tracePoint_list').datagrid('reload');
                } else {
                    $.messager.alert('提示', obj_json.msg, 'error');
                }
            }
        });
    }
    function clearForm() {
        $('#ff_trace_point_add').form('clear');
    }

    function toPoint(){
        var pname = $("#pname").val();
        var scope = $("#scope").val();
        var addressId = $("#addressId").val();
        var flag = false;
        if (null != pname && pname != "") {
            if (null != scope && scope != "") {
                if (null != addressId && addressId != "") {
                    flag = true;
                } else {
                    $.messager.alert('提示', '地址不能为空', 'error');
                }
            } else {
                $.messager.alert('提示', '范围不能为空', 'error');
            }
        } else {
            $.messager.alert('提示', '名称不能为空', 'error');
        }

        if(flag){
            map.clearOverlays();    //清除地图上所有覆盖物
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint(addressId,function(point){
                  if(point){
                      $("#lat").val(point.lat);
                      $("#lgt").val(point.lng);
                      map.centerAndZoom(point, 18);
                      var marker = new BMap.Marker(point);
                      map.addOverlay(marker);
                      marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                      var circle = new BMap.Circle(point,scope);
                      circle.setFillColor("BLUE");//填充颜色
                      circle.setStrokeColor("#A6CB61");//边缘颜色
                      map.addOverlay(circle);
                  }
            },'上海市');
        }
    }

    $(function(){
        /*JQuery 限制文本框只能输入数字和小数点*/
        $("#scope").keyup(function(){
            $(this).val($(this).val().replace(/[^0-9.]/g,''));
        }).bind("paste",function(){  //CTR+V事件处理
            $(this).val($(this).val().replace(/[^0-9.]/g,''));
        }).css("ime-mode", "disabled"); //CSS设置输入法不可用
    });
</script>
</html>